<script setup>
import {ref, reactive, onMounted} from 'vue';
import axios from "@/utils/axios.js";

const tableRef = ref()
const data = reactive({
  list: null,
  total: 0,
  page: 1,
  limit: 5,
  showAdd: false,
  unPwd: false,
  unName: false,
  addFrom: {
    mobile: '',
    pwd: '',
    repwd: ''
  }
})
const init = () => {
  axios.get('/api/user/page', {
    params: {
      page: data.page,
      limit: data.limit
    }
  }).then(res => {
    console.log("用户展示", res)
    data.list = res.data.records
    data.total = res.data.total
  })
}
onMounted(() => {
  init()
})
//分页
const jump = (val) => {
  data.page = val
  init();
}
//添加用户
const BeforeClose = () => {
  data.addFrom.mobile = ''
  data.addFrom.pwd = ''
  data.addFrom.repwd = ''
  data.unPwd = false
  data.unName = false
}
//检查手机号是否存在
const checkName = () => {
  axios.post('/api/user/checkName', data.addFrom).then(res => {
    if (res.code != 200) {
      data.unName = true
    } else {
      data.unName = false
    }
  })
}
//二次检查密码
const checkPwd = () => {
  if (data.addFrom.pwd != data.addFrom.repwd) {
    data.unPwd = true
  } else {
    data.unPwd = false
  }
}
//添加
const addUser = () => {
  if (data.unPwd || data.unName) {
    return
  }
  if (data.addFrom.mobile != null&&data.addFrom.mobile!="" && data.addFrom.pwd != null&&data.addFrom.pwd!="") {
    axios.post('/api/user/add', data.addFrom).then(res => {
      console.log("添加用户", res)
      if (res.code == 200) {
        ElMessage.success("添加成功")
        init()
        data.showAdd = false;
      } else {
        ElMessage.error("添加失败")
      }

    })
  }else {
    ElMessage.error("请输入手机号和密码")
  }
}
//删除
const del=(id)=>{
  axios.get('/api/user/delById?id='+id).then(res=>{
    if(res.code!=200){
      ElMessage.error(res.msg)
    }
    else{
      ElMessage({
        message: '删除成功',
        type: 'success',
        duration: 1000,
        onClose: () => {
          init()
        }
      })
    }
  })
}
//批量删除
const delSelected=()=>{
  const rows = tableRef.value.getSelectionRows()
  const ids = rows.map(row => row.id)
  axios.post('/api/user/delBatch',ids).then(res=>{
    if(res.code!=200){
      ElMessage.error(res.msg)
    }
    else{
      ElMessage({
        message: '删除成功',
        type: 'success',
        duration: 1000,
        onClose: () => {
          init()
        }
      })
    }
  })
}
</script>

<template>
  <div class="employ">
    <h1>用户展示</h1>
    <div class="btu">
      <el-button type="danger" size="mini" @click="delSelected" icon="Delete">删除选中</el-button>
      <el-button type="primary" size="mini" @click="data.showAdd = !data.showAdd" icon="Plus">添加用户</el-button>
    </div>
    <el-table :data="data.list" ref="tableRef" style="width: 100%">
      <el-table-column type="selection" width="55" label="选择"></el-table-column>
      <el-table-column label="序号" type="index" align="center" width="100"/>
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
      <el-table-column prop="pwd" label="密码" align="center"></el-table-column>
      <el-table-column prop="reg_time" label="注册时间" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" align="center"></el-table-column>
      <el-table-column prop="salt" label="盐" align="center"></el-table-column>
      <el-table-column prop="repwdTimes" label="散列次数" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="danger"   icon="delete" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background style="margin-top: 10px"
        layout="total, prev, pager, next, jumper"
        :total="data.total"
        :page-size="data.limit"
        :current-page="data.page"
        @current-change="jump"
    />

    <el-dialog :close-on-click-modal="false" draggable="true" v-model="data.showAdd" @close="BeforeClose"
               title="添加用户" overflow="ture" width="500" style="height: 500px">
      <el-form label-width="120px">
        <el-form-item label="手机号" @change="checkName">
          <el-input v-model="data.addFrom.mobile" placeholder="请输入手机号"></el-input>
          <label v-show="data.unName" style="color: red" font-weight="bold">账号已存在</label>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="data.addFrom.pwd" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" @change="checkPwd">
          <el-input v-model="data.addFrom.repwd" placeholder="请输入确认密码" type="password"></el-input>
          <label v-show="data.unPwd" style="color: red" font-weight="bold">两次密码不一致</label>
        </el-form-item>
        <el-form-item label="确定">
          <el-button type="primary" @click="addUser()">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>
.employ {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>